import React, { useRef, FC, ReactElement } from 'react'
import { ITodo } from '../typings';

interface IProps {
    /**
     * addTodo 添加数据操作之后肯定要返回给父级,所以添加方法直接就是父级传入的方法
     * addTodo 的参数是一个todo, todo的数据是继承接口的 ITodo
     * addTodo 不需要返回值 所以void
     */
    addTodo: (todo: ITodo) => void,
    todoList: ITodo[];
}
const TdInput: FC<IProps> = ({
    addTodo,
    todoList
}): ReactElement => {
    const inputRef = useRef<HTMLInputElement>(null);
    const addItem = (): void => {
        /**
         * inputRef.current.value 拿到input的值
         * inputRef.current! 断言 一定能有值
         */
        const val = inputRef.current!.value.trim()
        if(val.length > 0) {
            const isExist = todoList.find(todo => todo.content === val)
            if(isExist) {
                alert('已存在该项')
                return;
            }

            addTodo({
                id: new Date().getTime(),
                content: val,
                completed: false
            })
            //使用完数据都要清空
            inputRef.current!.value = ''
        }
    }
    return (
        <div className="todo-input">
            <input type="text" ref={inputRef} placeholder="请输入待办项" />
            <button onClick={ addItem }>增加</button>
        </div>
    )
}

export default TdInput;